<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>jQuery时钟Clock</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        #clock {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            background: url("./imgs/timg.png") 0px 0px no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .second {
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -9px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .secHead{
            width:40px;
            height:40px;
            background:url("./imgs/dog.jpg") 0px 0px no-repeat;
            background-size:100% 100%;
            position:absolute;
            left:-10px;
            top:64px;
            border-radius:50%;
        }
        .minute{
            width: 22px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -53px 0px no-repeat;
            background-size: 606% 100%;
            position: absolute;
            left: 393px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:11px 273px;
        }
        .hour{
            width: 31px;
            height: 373px;
            /* border: 1px solid red; */
            background: url(./imgs/pointer.png) -101px 0px no-repeat;
            background-size: 468% 100%;
            position: absolute;
            left: 389px;
            top: 135px;
            /* opacity:0.5; */
            transform:rotate(0deg);
            transform-origin:16px 273px;
        }
        #btnSound{
            width:80px;
            height:80px;
            border-radius:50%;
            border:5px solid darkgray;
            position:absolute;
            left:20px;
            top:20px;
        }
        .muteBack{
            background:url("./imgs/mute.png") 2px 3px no-repeat;
        }
        .soundBack{
            background:url("./imgs/sound.png") 2px 3px no-repeat;
            animation:rotateBtn 5s linear infinite;
        }
        @keyframes rotateBtn{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg)
            }
        }
    </style>
    <script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/JqueryRotate.js"></script>
    <script type="text/javascript">
        var secDegree = 0;
        var minuteDeg = 0;
        var hourDeg = 0;
        // 声音是否在播放
        var playing = false;

        // 文档准备好以后，咱们就进行秒针的数据初始化
        function bodyload(){
            var now = new Date();
            var sec = now.getSeconds();
            secDegree = sec * 6;//一秒6度，比如15秒，15秒乘以6度=90度，30秒乘以6度=180度。

            // 计算当前时间的分针旋转角度
            var min = now.getMinutes();
            // minuteDeg = min * (0.1 * 60);//每秒转0.1度，1分钟等于60秒。比如现在15分钟是90度，15*0.1*60=90度
            minuteDeg = min * 6;

            // 计算当前时间的时针旋转角度
            var hour = now.getHours();
            // hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度，1小时等于3600秒，比如现在3点钟是90度，3*0.00833*3600=89.964度
            // hourDeg = hour*(360/12);//360度,12份。
            hourDeg = (hour + min/60) * 30; //加上分钟的时间，不然比如9点50，时钟依然指向9点，而不是靠近10点的位置。
            
            $("#btnSound").click(function(){
                playing = !playing;
                if(playing == true){
                    $(this).removeClass("muteBack");
                    $(this).addClass("soundBack");
                }
                else{
                    $(this).removeClass("soundBack");
                    $(this).addClass("muteBack");
                }
            });
        }
        // 每秒钟调用一次
        function clockRotate(){
            if(playing == true){
                $("audio")[0].volume = 0.02;
                $("audio")[0].play();
            }
            // 秒针的旋转
            secDegree += 6;//360度/60秒=6度/秒
            $(".second").rotate(
                {
                    angle:secDegree,
                    center:[11,273]
                }
            );
            
            // 分针的旋转
            minuteDeg += 0.1; //360度/3600秒=0.1度/秒
            $(".minute").rotate({
                angle:minuteDeg,
                center:[11,273]
            });

            // 时针的旋转
            // hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
            hourDeg += 0.00833;
            $(".hour").rotate({
                angle:hourDeg,
                center:[16,273]
            });
        }
        // 启动定时器，定时调用旋转函数
        setInterval("clockRotate()",1000);
    </script>
</head>
<body onload="bodyload()">
    <audio src="./audio/da.wav"></audio>
    <div id="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second">
            <div class="secHead"></div>
        </div>
        <div id="btnSound" class="muteBack"></div>
    </div>
</body>
</html>